<template>
    
    <div>
      <!-- 头部数据接收 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTableRef"
        row-class-name="custom-row-class"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="userGroup" label="用户组"></el-table-column>
        <el-table-column prop="ctime" label="创建时间">
          <template #default="scoped">
            {{ formatTime(scoped.row.ctime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scoped">
            <el-button type="primary" @click="editBtn(scoped.row)">编辑</el-button>
            <el-button type="danger" @click="deleteAction(scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页控制 -->
      <div class="page">
        <el-pagination
          v-model:current-page="formData.currentPage"
          v-model:page-size="formData.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 编辑信息 -->
    <el-dialog v-model="showEditModal" title="编辑用户信息" width="600">
      <el-form :model="editForm">
        <el-form-item label="账号名">
          <el-input v-model="editForm.account" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="用户组">
          <el-select v-model="editForm.userGroup" placeholder="请选择用户组">
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="普通管理员" value="普通管理员" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showEditModal = false">取消</el-button>
          <el-button type="primary" @click="editAccountBtn">
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import { jszh, dele, xg, deles } from '@/views/api/account.js';
  import { ref, reactive } from 'vue';
  import dayjs from 'dayjs';
  import { ElMessage } from 'element-plus';
  
  const tableData = ref([]);
  const total = ref(0);
  const formData = reactive({
    currentPage: 1,
    pageSize: 5
  });
  const showEditModal = ref(false);
  const editForm = reactive({
    id: '',
    account: '',
    userGroup: ''
  });
  const selectedRows = ref([]);
  const multipleTableRef = ref(null);
  
  const getAccountList = async () => {
    try {
      let res = await jszh({
        currentPage: formData.currentPage,
        pageSize: formData.pageSize
      });
      tableData.value = res.data;
      total.value = res.total;
    } catch (error) {
      ElMessage.error('获取用户列表失败');
    }
  };
  getAccountList();
  
  const handleCurrentChange = () => {
    getAccountList();
  };
  const handleSizeChange = () => {
    getAccountList();
  };
  const formatTime = (time) => {
    return dayjs(time).format('YYYY-MM-DD'); // 日期格式调整为 YYYY-MM-DD
  };
  const del = async (id) => {
    try {
      let { code, msg } = await dele({ id });
      if (code == 0) {
        ElMessage.success(msg);
        getAccountList();
      } else {
        ElMessage.error(msg);
      }
    } catch (error) {
      ElMessage.error('删除用户失败');
    }
  };
  const editBtn = ({ id, account, userGroup }) => {
    editForm.id = id;
    editForm.account = account;
    editForm.userGroup = userGroup;
    showEditModal.value = true;
  };
  const editAccountBtn = async () => {
    try {
      let { code, msg } = await xg(editForm);
      if (code == 0) {
        showEditModal.value = false;
        ElMessage.success(msg);
        getAccountList();
      } else {
        ElMessage.error(msg);
      }
    } catch (error) {
      ElMessage.error('修改用户信息失败');
    }
  };
  
  // 批量删除功能
  const handleSelectionChange = (rows) => {
    selectedRows.value = rows.map((row) => row.id);
  };
  const deleteAction = async (id) => {
    if (selectedRows.value.length > 0) {
      // 如果有选中行，执行批量删除
      try {
        let { code, msg } = await deles({ ids: JSON.stringify(selectedRows.value) });
        if (code == 0) {
          ElMessage.success(msg);
          getAccountList();
          multipleTableRef.value.clearSelection(); // 清除选中状态
        } else {
          ElMessage.error(msg);
        }
      } catch (error) {
        ElMessage.error('批量删除失败');
      }
    } else {
      // 如果没有选中行，删除当前行
      del(id);
    }
  };
  </script>
  <style lang="scss" scoped>
  .box {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px; /* 增加标题与表格之间的间距 */
  }
  .page {
    margin-top: 20px; /* 增加分页与表格之间的间距 */
  }
  
  /* 自定义表格行样式 */
  .custom-row-class {
    line-height: 30px; /* 增加行高 */
    font-size: 16px; /* 增大字体大小 */
  }
  </style>